<template>
	<nt-container v-model="scrollHeight">
		<view class="check-tabs">
			<view class="check-tabs__item" :class="{ active: type === 1 }" @tap="changeType(1)">库存</view>
			<view class="check-tabs__item" :class="{ active: type === 2 }" @tap="changeType(2)">已出库</view>
		</view>
		<view class="check-tabs">
			<view class="check-tabs__item" :class="{ active: partsType === 1 }" @tap="partsType = 1">公司配件</view>
			<view class="check-tabs__item" :class="{ active: partsType === 0 }" @tap="partsType = 0">个人配件</view>
			<view class="check-tabs__item" :class="{ active: partsType === 3 }" @tap="partsType = 3">申购配件</view>
		</view>
		<!-- 库存个人 公司配件 -->
		<Stock v-if="type === 1&& partsType!==3" :status="partsType"></Stock>
		<!-- 已出库数据 -->
		<Outbound v-if="type === 2" :status="partsType"></Outbound>
		<!-- 库存申购配件 -->
		<Purchase v-if="type === 1&&partsType==3"></Purchase>
	</nt-container>
</template>

<script>
	import {
		getOrderList,
		receivingOrders,
		makingPhone,
		getCountTabs,
		indexData
	} from "@/api"
	import Stock from './components/Stock.vue'
	import Outbound from './components/Outbound.vue'
	import Purchase from './components/Purchase.vue'
	export default {
		components: {
			Stock,
			Outbound,
			Purchase
		},
		data() {
			return {
				scrollHeight: 0,
				type: 1,
				// 1公司，2个人，3采购
				partsType: 1
			}
		},
		provide() {
			return {
				storehouseParts: this
			}
		},
		computed: {
			listHeight() {
				let convention = this.scrollHeight - 160;
				return convention
			}
		},
		methods: {
			changeType(type) {
				this.type = type
				this.partsType = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		margin-top: 20rpx;

	}

	.search {
		height: 80rpx;
		background: #fff;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.check-tabs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		margin: 20rpx 0;
		background: #fff;

		&__item {
			flex: 1;
			text-align: center;
			color: #666;
			position: relative;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;

			&.active {
				background: var(--theme-color);
				color: #fff;
			}

			&::before {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1rpx;
				background: #f5f5f5
			}
		}
	}

	.item {
		background: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;

		&-body {
			height: 200rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.image {
				height: 160rpx;
				width: 160rpx;
				background: #f5f5f5;
				border-radius: 6rpx;
				flex-shrink: 0;
			}

			.content {
				flex: 1;
				margin-left: 20rpx;

				.name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.price,
				.number {
					font-size: 26rpx;
					color: #666;
					margin-top: 6rpx;

					text {
						color: #f00;
					}
				}
			}
		}

		&-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.btn {
				padding: 6rpx 14rpx;
				border-radius: 50rpx;
				font-size: 26rpx;
				color: var(--theme-color);
				border: 1rpx solid var(--theme-color);
				width: 140rpx;
				margin-top: 10rpx;
				text-align: center;
				margin-left: 10rpx;
			}
		}
	}
</style>